<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户系统-会员等级管理</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">会员等级管理</h1>
			<div class="z-pop_question">
  	 			<el-popover
				  ref="popoverq"
				  placement="bottom-start"
				  width="400"
				  trigger="hover">
				  <p class="z-jiao">
				  	1、查找你所有的会员等级，了解会员等级详情信息<br/>
					2、添加平台的会员等级，当会员达到对应等级，享有特定会员特权<br/>
				  </p>
				</el-popover>
				<i v-popover:popoverq class="el-icon-question"></i>
  	 		</div>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>客户<span>/</span>会员管理</div>
		</div><!-- 页面头部 end -->
		
		<div class="list-content">
			<!--条件筛选-->
			<div class="content_item_filter clearfix">
 				<div class="input-select fl btn-radid_none">
 					<div class="filter-form filter-form-one clearfix">
	 					<el-input placeholder="等级名称" clearable v-model="conditions.name.value" class="minW40 z_input-holder" >
						</el-input>
					</div>

					<div class="filter-operate">
						<el-tooltip class="item" content="查询" placement="bottom-start">
					    	<el-button icon="el-icon-search" @click="queryCustomerLevel"></el-button>
					    </el-tooltip>
						<el-tooltip class="item" content="清空" placement="bottom-start">
					    	<el-button icon="el-extend-clean" @click="clearCustomerLevel"></el-button>
					    </el-tooltip>
				    </div>
 				</div>
 				<div class="filter-btn fr">
 					<el-button split-button type="primary" @click="toAddCustomerLevel">
					  新增会员等级
<!-- 					  <el-dropdown-menu slot="dropdown"> -->
<!-- 					    <el-dropdown-item>单个新增</el-dropdown-item> -->
<!-- 					    <el-dropdown-item>批量导入</el-dropdown-item> -->
<!-- 					  </el-dropdown-menu> -->
					</el-button>
 				</div>
			</div>

			<!--主体表格-->
			<div class="z-tables">
 				<el-table ref="multipleTable" :data="customerLevelList" v-loading="loading" style="width: 100%;" @selection-change="selsChange">
 					<el-table-column type="selection" prop="uuid" width="55"></el-table-column>
				    <el-table-column fixed prop="name" label="等级名称" min-width="100"></el-table-column>
				    <el-table-column prop="image" label="图标" min-width="100">
				    	<template slot-scope="scope">
				      		<img  :src="scope.row.image" alt="" style="width: 60px;height: 60px">
				    	</template>
				    </el-table-column>
				    <el-table-column prop="integral" label="等级所需积分" min-width="100"></el-table-column>
                    <el-table-column label="备注" min-width="200">
                    	<template slot-scope="scope">
							<el-tooltip placement="bottom-start" popper-class="table-tooltip">
							  	<div slot="content">{{ scope.row.note }}</div>
								<div class="over-omitted">{{ scope.row.note }}</div>
							</el-tooltip>
						</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" min-width="140"></el-table-column>
				    <el-table-column fixed="right" label="操作" min-width="100" class-name="table-operate-td">
						<template slot-scope="scope">
							<el-button type="text" @click="handleEdit(scope.$position, scope.row)">编辑</el-button>
                            <span>|</span>
                            <el-button type="text" @click="handleDelete(scope.$position, scope.row.uuid)">删除</el-button>
						</template>
				    </el-table-column>
				</el-table>
 			</div>
 			
 			<!--分页-->
 			<div class="grid-content">
 				<div class="bg-purple-left">
 					<el-checkbox v-model="tableAllCheck" @change="tableAllCheckFn(customerLevelList)"></el-checkbox>
					<el-dropdown @command="handleCommand" placement="top">
						<div class="el-input el-input--suffix">
							<input type="text" value="批量操作" readonly="readonly" class="el-input__inner">
							<span class="el-input__suffix">
								<span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span>
							</span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="delete">批量删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
 				</div>
	 			<div class="bg-purple-light">
				    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
			  	</div>
			</div>
		</div>
	</div>
</div>
</body>

<script th:inline="javascript">
	
    new Vue({
        el: "#app",
        data: {
            customerLevelList: [],
            tableAllCheck: false,
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            act: 0, //tab选项
            isLeft: false, //左右阴影
            isRight: false,
            loading: true
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "integral": "asc"
                }
            };
            $.ajax({
                url: "/backstage/customer/customerlevel/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.customerLevelList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                    self.loading = false;
                }
            });
        },
        methods: {
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryCustomerLevel();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryCustomerLevel();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
			tableAllCheckFn(rows){
				if (rows) {
		          rows.forEach(row => {
		            this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
		          })
		        }
			},
			selsChange(sels) {  
                this.sels = sels;
            }, 
			handleCommand(command) {
				var self = this;
				var ids = "";
				if(self.sels){
					ids = self.sels.map(item => item.uuid).join();
				}
				if(ids == ""){
					self.$message({
                    	duration: 2000,
                        message: '请至少选择一个会员等级数据',
                        type: 'warning',
                        customClass: 'message-center'
                    });
					return ;
				}
				if(command == "delete"){
					self.handleDelete("",ids);
				}
			},
            queryCustomerLevel: function() {
                var self = this;
                self.loading = true;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "integral": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/customer/customerlevel/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.customerLevelList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            },
            clearCustomerLevel: function() {
                var self = this;
                self.conditions.name.value = "";
            },
            toAddCustomerLevel: function () {
                window.location.href = "/backstage/customer/customerlevel/toadd";
            },
            handleEdit(position, row) {
                window.location.href = "/backstage/customer/customerlevel/toedit" + "/" + row.uuid;
            },
            handleDelete(position, uuids) {
                var self = this;
                self.$confirm('确定删除所选数据？','提示',{
                	confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(_ => {
           			$.ajax({
                        url: "/backstage/customer/customerlevel/delete",
                        type: "POST",
                        data: JSON.stringify(uuids.split(",")),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode == "1") {
                            	self.$message({
                                	showClose: true,
                                	duration: 1500,
                                    message: '删除成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    onClose: function () {
                                    	self.queryCustomerLevel();
                                    }
                                });
                            } else {
                            	self.$message({
                            		showClose: true,
                                	duration: 1500,
                                    message: '删除失败',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                            }
                        }
                    });
	        	})
            }
        }
    });
</script>
</html>